<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <style>
        div * {
            font-size: 18px;
        }
        
        .link-enter-active,
        .link-leave-active {
            /*----------------------------------------
                因为是两个元素之间的过渡、
                所以，要在进入过渡时和离开过渡时设置样式
            ------------------------------------------*/
            transition: all 1s;
        }
        
        .link-leave-to {
            /*------------------------------------
                leave-to 是设置当前元素消失的样式
            -------------------------------------*/
            opacity: 0;
        }
    </style>
</head>

<body>
    <!-- 
        过渡的类名
        在进入/离开的过渡中，会有 6 个 class 切换。
        
        v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
        v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
        v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
        v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
        v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
        v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
     -->
    <div id="app">
        <router-link to="/link1">one</router-link>
        <router-link to="/link2">two</router-link>
        <transition name="link">
            <router-view></router-view>
        </transition>
    </div>

    <script>
        const link1 = {
            template: '<div>link11111111111111111111</div>'
        }
        const link2 = {
            template: '<div>link two two two two</div>'
        }
        const router = new VueRouter({
            routes: [{
                path: '/link1',
                component: link1
            }, {
                path: '/link2',
                component: link2
            }]
        })
        new Vue({
            router
        }).$mount('#app')
    </script>
</body>

</html>